<template>
  <div class="agel-num-range">
    <el-input class="range-input" v-model="start" type="number" :placeholder="startPlaceholder"></el-input>
    <span class="range-separator">{{ separator }}</span>
    <el-input class="range-input" v-model="end" type="number" :placeholder="endPlaceholder"></el-input>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  startValue: [String, Number],
  endValue: [String, Number],
  startPlaceholder: {
    type: String,
    default: '请输入金额上限'
  },
  endPlaceholder: {
    type: String,
    default: '请输入金额下限'
  },
  separator: {
    type: String,
    default: '-'
  },
});

const start = computed({
  get: () => {
    return props.startValue
  },
  set: (val) => {
    emits('update:startValue', val);
  }
});
const end = computed({
  get: () => {
    return props.endValue
  },
  set: (val) => {
    emits('update:endValue', val);
  }
});

const emits = defineEmits(['update:startValue', 'update:endValue'])

</script>
<style lang="scss" scoped>
.agel-num-range {
  width: 100%;
  display: flex;
  align-items: center;

  .range-input {
    flex: 1;
  }

  .range-separator {
    margin: 0 8px;
  }
}
</style>
